<template>
  <div class="list-item" :class="{'list-item-selected':selected}"
       @click="onClick"
  >
    <img v-show="false" class="img" :src="src" alt="image">
    <i class="iconfont icon" :class="data.icon"></i>
    <div>{{ data.label }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, provide, ref, onUnmounted, PropType } from 'vue';
import { Emitter } from '@/ui-kit/index';
import { SelectObject } from '../crate-object/msg';
import { ListItem } from './index';

export default defineComponent({
  name: 'list-item',
  emits: [],
  props: {
    data: {
      type: Object as PropType<ListItem>,
    },
  },
  setup(props, { emit }) {
    const selected = ref(false);

    function onSelect(data: ListItem) {
      selected.value = (data === props.data);
    }

    onMounted(() => {
      Emitter.on(SelectObject, onSelect);
    });
    onUnmounted(() => {
      Emitter.off(SelectObject, onSelect);
    });

    const src = ref('');
    return {
      src,
      selected,
      onClick() {
        Emitter.emit(SelectObject, props.data);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.list-item {
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid transparent;
  padding: 5px;

  .img {
    max-width: 50px;
    max-height: 60px;
  }

  .icon {
    font-size: 50px;
  }
}

.list-item:hover {
  border: 1px solid #666666;
}

.list-item-selected {
  outline: 1px solid #ddd;
  background-color: #f0f0f0;
}
</style>
